<template>
	<view class="container">
		<view class="consignee">
			<view class="person">当前位置</view>
			<view class="location" @click="getcurrentLocation">{{currentLocation}}</view>
		</view>
		<view class="consignee">
			<view class="person">姓名</view>
			<input v-model="addrdss_info.linkMan" class="person-info" placeholder="请输入名字" type="text" />
		</view>
		<view class="consignee">
			<view class="person">手机号</view>
			<input v-model="addrdss_info.mobile" class="person-info" placeholder="请输入手机号码" type="number" />
		</view>
		<view class="consignee" style="border-top:solid 20rpx #e8e8e8 ;">
			<view class="person">所在地区</view>
			<AddressPicker class="person-info picker" @change="change" :level="3">{{planLocate}}</AddressPicker>
		</view>
		<view class="consignee">
			<view class="person">详细地址</view>
			<input v-model="addrdss_info.address" class="person-info" placeholder="如:街道,门牌号" type="text" />
		</view>
		<view class="sure" @click="sure">确定</view>
	</view>

</template>

<script>
	let _this
	import AddressPicker from "../../components/lingdang-AddressPicker/AddressPicker.vue"
	import AllAddress from '../../components/lingdang-AddressPicker/AddressData.js'
	export default {
		data() {
			return {
				planLocate: '请选择地址',
				addrdss_info: {
					linkMan: '',
					mobile: '',
					address: ''
				},
				currentLocation: '点击获得定位',
				pickAddress: []
			}
		},
		components: {
			AddressPicker
		},
		onLoad() {

			this.getLocation()
		},

		mounted() {
			_this = this
		},
		methods: {
			sure() {
				this.pickAddress = this.planLocate.split('-');
				if (this.addrdss_info.linkMan && this.addrdss_info.address && this.addrdss_info.mobile && this.pickAddress
					.length !== 0) {
					uni.showLoading({
						title: '加载中...'
					})
					uni.request({
						url: 'http://127.0.0.1:8889/user-server/api/address/v1/add',
						method: 'POST',
						data: {
							"city": this.pickAddress[1],
							"default_status": 0,
							"detail_address": this.addrdss_info.address,
							"phone": this.addrdss_info.mobile,
							"province": this.pickAddress[0],
							"receive_name": this.addrdss_info.linkMan,
							"region": this.pickAddress[2],
						},
						header: {
							token: this.$store.state.m_user.token
						},
						success(res) {
							if (res.data.code === 200) {
								uni.hideLoading()
								uni.$showMsg('添加地址成功')
							}
						}
					})
				} else {
					uni.$showMsg('请填写完整信息')
				}
				// console.log(this.addrdss_info)
			},

			change(result) {
				// console.log(JSON.stringify(result.data));
				this.planLocate = '';
				result.data.forEach((item, index) => {
					if (index === 0) {
						this.planLocate += item.name
					} else {
						this.planLocate += '-' + item.name
					}
				});
				this.pickAddress = this.planLocate.split('-');

			},
			getcurrentLocation() {
				uni.chooseLocation({
					success: function(res) {
						// console.log(res)
						let pattern = /.+?(省|市|自治区|自治州|县|区)/g
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						if (res.address) {
							_this.addrdss_info.address = _this.currentLocation = res.address + res.name
							_this.planLocate = _this.currentLocation.match(pattern).join('-')
							// console.log(_this.currentLocation.match(pattern));
						}
						console.log(_this.currentLocation)
					}
				});
			},
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					altitude: true,
					isHighAccuracy: true,
					success: function(res) {
						// console.log(res)
						// const latitude = res.latitude;
						// const longitude = res.longitude;
						// uni.openLocation({
						// 	latitude: latitude,
						// 	longitude: longitude,
						// 	success: function(res) {
						// 		console.log(res);
						// 	}
						// });
						// console.log(res)
						// _this.currentLocation=res
						_this.currentLocation = res.address?.province + res.address.city + res.address
							.district + res.address.street
					}
				});
			},
			// // #ifdef H5
			// getLocation() {}
			// // #endif
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.container {
		background-color: rgb(245, 248, 247);
		width: 100%;
		/* height: 100vh; */

	}

	.location {
		display: flex;
		flex: 1;
		/* flex-direction: row; */
		align-items: center;
		/* background-color: #ffaaff; */
	}

	.consignee {
		display: flex;
		flex-direction: row;
		font-size: 36rpx;
		color: #757575;
		border-bottom: 1px solid #ccc;
	}

	.person {
		width: 30%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.person-info {
		width: 70%;
		height: 100rpx;
		color: #000000;
	}

	.picker {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.sure {
		width: 90%;
		height: 100rpx;
		background-color: #ff557f;
		border-radius: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		color: #FFFFFF;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 40rpx;
		transition: 1s;
	}

	.sure:hover {
		background-color: #ff3e61;

	}
</style>
